<template>
<div id="control-ability">
  <div class="controlAbilityTitle">
    <span>
			<img src="~@/assets/images/flagBlue2x.png" alt="" />
		</span>
    <span class="text">股票仓位与沪深300的指数对比图</span>
  </div>
  <div class="controlAbilityChart" v-if='picStatus == 0'>
    <div ref="controlCharts" style="width:100%;height:280px"></div>
  </div>
  <return-empty v-show='picStatus == 1'></return-empty>
  <return-error v-show='picStatus == 2'></return-error>
  <div class="detail" v-if='textStatus == 0'>
    <div class="average">
      平均仓位：<i v-text='defeatDate.number'></i>
    </div>
    <div class="chartControl">
      <div class="clearfix">
        <div class="conContainer" :style="{borderColor:defeatDate.color}">
          <div class="conContent" :style="{width:defeatDate.width,background:defeatDate.color}"></div>
        </div>
        <div class="fr label">
          <img src="~@/assets/images/red2x-f.png" alt="" class="fl" />
          <span v-text='label'></span>
        </div>
      </div>
      <div class="evalute">
        <div class="img" style="display: inline-block;">
          <img src="~@/assets/images/trophy2x.png" alt="" />
        </div>
        <span>
          本月您的仓位控制得分是
          <i v-text = 'scole'></i>分
        </span>
      </div>
      <span class="dec" v-text='labelName'></span>
      <div class="tSmall">
        <img src="~@/assets/images/star.png">
        <span class="textSmall" v-text='smallLabel'></span>
        <img src="~@/assets/images/star.png">
      </div>
    </div>
  </div>
  <return-empty v-show='textStatus == 1'></return-empty>
  <return-error v-show='textStatus == 2'></return-error>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/legend'
import RemoteDAO from '@/common/remoteDAO.js'
import tools from '@/common/tools'
import myPoint from '@/assets/images/myPoint.png'
import shPoint from '@/assets/images/shPoint.png'

let tooltipDate = ['']
const contChart = {
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,.4)',
    formatter: (params) => {
      if (params[1]) {
        return `${tooltipDate[params[0].dataIndex]}<br/>
              <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:${params[0].color}"></div>&nbsp;
              股票仓位：${params[0].data}%<br/>
              <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:${params[1].color}"></div>&nbsp;
              沪深300指数：${params[1].data}`
      } else {
        return `${params[0].axisValue}<br/>
              <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:#2eaaff"></div>&nbsp;
              沪深300指数：${params[0].data}`
      }
    }
  },
  grid: {
    show: false,
    top: '7%',
    left: '0',
    right: '0',
    bottom: "13%",
    containLabel: true
  },
  legend: {
    selectedMode: false,
    data: ['股票仓位(%)', '沪深300指数'],
    bottom: 10,
    textStyle: {
      color: '#999'
    }
  },
  xAxis: {
    show: true,
    axisLine: {
      show: true,
      onZero: false,
      lineStyle: {
        color: '#c9daeb'
      }
    },
    axisLineTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    },
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        color: '#999'
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: [{
      show: true,
      splitNumber: 2,
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#bac9d8'],
          type: 'dotted'
        }
      },
      axisLineTick: {
        show: false
      },
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#999'
        },
        formatter: '{value}%',
        inside: true
      },
      axisTick: {
        show: false
      }
    },
    {
      show: true,
      splitNumber: 2,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLineTick: {
        show: false
      },
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#999'
        },
        inside: true
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [{
      name: '股票仓位(%)',
      type: 'line',
      smooth: false,
      symbol: 'image://' + myPoint,
      symbolSize: 10,
      showSymbol: false,
      itemStyle: {
        normal: {
          color: '#fb8a3f'
        }
      }
    },
    {
      name: '沪深300指数',
      type: 'line',
      smooth: false,
      symbol: 'image://' + shPoint,
      symbolSize: 10,
      showSymbol: false,
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#2EAAFF'
        }
      },
      showSymbol: false
    }
  ]
}

export default {
  props: ['fathertime', 'parentDay','monthstatus'],
  data() {
    return {
      defeatDate: {
        number: '',
        width: '',
        color: '#fb8a3f'
      },
      myControl: [],
      HSControl: [],
      tradedate: [],
      label: '',
      labelName: '',
      smallLabel: '',
      scole: '',
      controlChart: "",
      picStatus: 0,
      textStatus: 0
    }
  },
  created() {
    this.initControl();
  },
  beforDestroy() {
    echarts.dispose(this.controlChart)
  },
  watch: {
    fathertime: function() {
      this.initControl();
    },
    monthstatus:function() {
      this.initControl();
    }
  },
  methods: {
    initControl() {
      let vm = this;
      let obj0020 = {
        'recent': vm.fathertime
      }
      RemoteDAO.callZL13100020(obj0020, vm.ZL13100020);
      let obj0021 = {
        'tradedate': vm.parentDay
      }
      RemoteDAO.callZL13100021(obj0021, vm.ZL13100021);
    },
    ZL13100020(result) {
      let vm = this;
      if (result.error == '1') {
        vm.textStatus = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let empty = JSON.parse(bigdata).hits.hits;
        if (empty.length == 0) {
          vm.textStatus = 1
        } else {
          vm.textStatus = 0
          let specData = JSON.parse(bigdata).hits.hits[0]._source;
          vm.defeatDate.number = specData.position_avg + '%';
          vm.defeatDate.width = specData.position_avg + '%';
          vm.label = specData.position_label;
          vm.scole = specData.position_index
          switch (true) {
            case specData.position_index >= 80:
              vm.labelName = '您能在大盘低点加仓，大盘高点减仓。';
              vm.smallLabel = '仓位控制优秀，做的不错哦！'
              break;
            case specData.position_index >= 60:
              vm.labelName = '您能在大盘低点加仓，大盘高点减仓。';
              vm.smallLabel = '仓位控制表现良好，还需努力呀！'
              break;
            case specData.position_index >= 0:
              vm.labelName = '您未能在大盘低点加仓，大盘高点减仓。';
              vm.smallLabel = '仓位控制还有很大进步空间呢！'
              break;
          }
        }
      }
    },
    ZL13100021(result) {
      let vm = this;
      if (result.error == '1') {
        vm.picStatus = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        if (specData.length == 0) {
          vm.picStatus = 1
        } else {
          vm.myControl = [0];
          vm.tradedate = [''];
          tooltipDate = ['']
          specData.forEach(function(item, i) {
            vm.myControl.push(item._source.stock_position);
            tooltipDate.push(String(item._source.tradedate))
            let tDate = String(item._source.tradedate).slice(4, 6) + '-' + String(item._source.tradedate).slice(6, 8)
            vm.tradedate.push(tDate);
          });
          vm.tradedate = vm.xDataExpand(vm.tradedate)
          vm.tradedate.push('')
          let obj0022 = {
            'tradedate': vm.parentDay
          }
          RemoteDAO.callZL13100022(obj0022, vm.ZL13100022);
        }
      }
    },
    xDataExpand(dateArr) {
      const threshHold = 15
      if (dateArr.length > threshHold) {
        return dateArr
      }

      let count = dateArr.length;
      let month = Number(dateArr[dateArr.length - 1].slice(0, 2));
      let date = Number(dateArr[dateArr.length - 1].slice(3, 6))
      let now = new Date(2017, month - 1, date);
      now.setDate(now.getDate() + 1);
      while (count < threshHold) {
        dateArr.push(tools.DateFormat(now, 'MM-dd'))
        now.setDate(now.getDate() + 1);
        count++;
      }

      return dateArr
    },
    ZL13100022(result) {
      let vm = this;
      if (result.error == '1') {
        vm.picStatus = 2;
        return;
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        if (specData.length == 0) {
          vm.picStatus = 1;
          return;
        } else {
          vm.picStatus = 0
          vm.HSControl = [];
          specData.forEach(function(item, i) {
            if (i == 0) {
              vm.HSControl.push(item._source.hs300_index);
            }
            vm.HSControl.push(item._source.hs300_index);
          });
          let average = (Math.max.apply(vm, vm.HSControl) + Math.min.apply(vm, vm.HSControl)) / 2
          let diff = (Math.max.apply(vm, vm.HSControl) - average) * 1.2;
          let averEchart = Math.ceil(Math.max.apply(vm, vm.HSControl)) + Math.ceil(diff) - (
            (Math.ceil(Math.max.apply(vm, vm.HSControl)) +
              Math.ceil(diff)) + (Math.floor(Math.min.apply(vm, vm.HSControl)) - Math.floor(diff))
          ) / 2
        this.$nextTick(() => {
          if (!vm.controlChart) {
            vm.controlChart = echarts.init(this.$refs.controlCharts);
            vm.controlChart.setOption(contChart)
          }
          vm.controlChart.setOption({
            xAxis: {
              data: this.tradedate
            },
            yAxis: [{
              max: 100
            }, {
              max: Math.ceil(Math.max.apply(vm, vm.HSControl)) + Math.ceil(diff),
              min: Math.floor(Math.min.apply(vm, vm.HSControl)) - Math.floor(diff),
              interval: averEchart
            }],
            series: [{
                data: this.myControl
              },
              {
                data: this.HSControl
              }
            ]
          })
        })
        }
      }
    }
  }
}
</script>
<style scoped>
.controlAbilityTitle {
  font-size: 24px;
  text-align: center;
  margin: 30px 0 70px 0;
}

.controlAbilityTitle img {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 10px;
}

.controlAbilityTitle .text {
  color: #999;
}

.detail {
  color: #999;
  text-align: center;
}

.average {
  font-size: 24px;
  text-align: center;
  margin-bottom: 2px;
}

.average i {
  color: #EB333B
}

.chartControl {
  font-size: 24px;
  padding-left: 60px;
}

.conContainer {
  display: inline-block;
  float: left;
  width: 460px;
  height: 30px;
  border: 1px solid #fb8a3f;
  border-radius: 40px;
  margin-top: 7px;
}

.conContent {
  height: 100%;
  border-radius: 15px;
  float: left;
}

.label {
  width: 140px;
  height: 44px;
  float: right;
  margin-left: 30px;
}

.evalute {
  font-size: 24px;
  margin-top: 56px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #999;
}

.evalute div {
  display: table-cell;
  vertical-align: middle;
}

.evalute .img {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

.evalute .img img {
  width: 100%;
  height: 100%;
}

.evalute i {
  color: #E31A2E;
}

.label img {
  display: inline-block;
  width: 140px;
  height: 100%;
}

.label span {
  display: inline-block;
  text-align: center;
  width: 120px;
  height: 100%;
  margin-left: -130px;
  line-height: 44px;
  color: white;
}

.dec {
  display: block;
  text-align: center;
  font-size: 24px;
  margin-top: 16px;
  margin-bottom: 40px;
  color: #999;
}

.tSmall {
  margin-top: 20px;
  height: 30px;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.tSmall img {
  height: 20px;
}

.tSmall>.textSmall {
  margin: 0 10px;
  font-size: 20px;
  line-height: 30px;
}
</style>
